<template>
	<view class="detail">
		<!-- 商品评价 -->
		<view class="det-assessment" v-for="(item, orderIdx) in list" :key="orderIdx">
			<view class="ass-top ass-mid">
				<view class="ass-top-l ass-mid-l">
					<view class="ass-mid-l-l">
						<image class="ass-mid-l-l-img" :src="resourcesUrl+item.userPic" mode=""></image>
					</view>
					<view class="ass-mid-l-r">{{item.userNickName}}</view>
				</view>
				<view class="ass-mid-r">{{item.createTime.substring(0,10)}}</view>
			</view>
			<view class="rateMain">
				<view class="rateNum">
					<uni-rate :readonly="true" :value="item.level" allow-half size="30" color="#D6D6D6"
						active-color="#C30D23" />
					<view class="rateText num">{{item.level}}.0分</view>
					<view v-if="level == 10 " class="rateText very">非常推荐</view>
				</view>
			</view>
			<view class="ass-top-detail">
				{{item.content}}
			</view>
			<view class="ass-img">
				<scroll-view  scroll-x="true" class="ass-img-ov">
					<view class="ass-img-list" v-for="(img, Idx) in  JSON.parse(item.picJson)" :key="Idx">
						<image @tap="clickImg(img)" :src="img"></image>
						<!-- <video :src="img" controls></video> -->
					</view>
					
					<!-- <image class="ass-img-list" src="/static/images/extension.png"></image>
					<image class="ass-img-list" src="/static/images/extension.png"></image>
					<image class="ass-img-list" src="/static/images/extension.png"></image> -->
				</scroll-view>
				<view class="ass-img-num" v-if="JSON.parse(item.picJson).length>4">
					<span>+{{JSON.parse(item.picJson).length}}</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const http = require('../../utils/http.js')
	import config from '../../utils/config.js'
	export default {
		data() {
			return {
				resourcesUrl: config.resourcesUrl,
				level: '',
				spuId: '',
				pageNum:1,
				pages:0,
				list:[],
				imagePath:[]
			}
		},
		onShow: function(){
			this.getList()
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			console.log(options)
			this.spuId = options.spuId
			
		},
		onReachBottom() {
		  if (this.pageNum < this.pages) {
		    this.pageNum +=1
		    this.getList()
		  }
		},
		methods: {
			clickImg(img1) {
				wx.previewImage({
					urls: [img1], //需要预览的图片http链接列表，多张的时候，url直接写在后面
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			getList() {
				const params = {
					url: '/gscloud_product/app/spuEvaluation/page',
					method: 'GET',
					data: {
						spuId: this.spuId,
						pageNum: this.pageNum,
						pageSize: 5
					},
					callBack: res => {
						this.pages = res.pages
						this.list = res.list
						console.log(res)
						console.log('ssssssssssss')
						console.log(res.list[0].picJson)
						console.log(JSON.parse(res.list[0].picJson))
					}
				}
					http.request(params)
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 商品评价 */
	.rateMain {
		padding: 20rpx 0rpx;

		.rateNum {
			display: flex;
			align-items: center;

			.rateText {
				margin-right: 20rpx;
				font-size: 30rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}

			.num {
				font-weight: 500;
				color: #C30D23;
				margin-left: 20rpx;
				margin-right: 20rpx;
			}

			.very {
				font-weight: 400;
				color: #C30D23;
				font-size: 28rpx;
			}
		}
	}

	.detail .det-assessment {
		background: #fff;
		border-radius: 5rpx;
		padding: 30rpx;
		margin-top: 5rpx;
	}

	.ass-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	.ass-top-l {
		display: flex;
		align-items: center;
		font-size: 14px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #222222;
	}

	.ass-top-l-l {
		width: 6rpx;
		height: 28rpx;
		background: linear-gradient(222deg, #FE5E42 0%, #FF965D 100%);
		border-radius: 4rpx;
		margin-right: 10rpx;
	}

	.ass-top-r {
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #C30D23;
	}

	.ass-mid-l {
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}

	.ass-mid-r {
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}

	.ass-mid-l-l {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		margin-right: 20rpx;
		.ass-mid-l-l-img{
			border-radius: 50%;
		}
	}

	.ass-top-detail {
		font-size: 14px;
		font-weight: 400;
		color: #222222;
		// overflow: hidden;
		// text-overflow: ellipsis;
		// display: -webkit-box;
		// -webkit-line-clamp: 2;
		/* 能够显示的行数，超出部分用...表示*/
		// -webkit-box-orient: vertical;
		margin-bottom: 14rpx;
	}

	.ass-img {
		position: relative;
	}

	.ass-img .ass-img-ov {
		width: 100%;
		white-space: nowrap;
		overflow-x: scroll;
	}

	.ass-img .ass-img-list {
		display: inline-block;
		height: 160rpx;
		width: 24%;
		margin-right: 8rpx;
		border-radius: 4rpx;
	}

	.ass-img .ass-img-num {
		left: 75%;
		position: absolute;
		top: 0%;
		display: inline-block;
		width: 170rpx;
		height: 160rpx;
		background: rgba(0, 0, 0, 0.3);
		border-radius: 4rpx;
		text-align: center;
		line-height: 160rpx;
	}

	.ass-img .ass-img-num span {
		text-align: center;
		font-size: 32rpx;
		font-weight: 400;
		color: #FFFFFF;
	}

	.ass-all {
		display: flex;
		justify-content: center;
	}

	.ass-all .all-pj {
		width: 254rpx;
		height: 64rpx;
		margin-top: 34rpx;
		line-height: 64rpx;
		border-radius: 32rpx;
		border: 1rpx solid #CCCCCC;
		font-size: 28rpx;
		font-weight: 400;
		color: #666666;
		text-align: center;
	}
</style>
